<!DOCTYPE html>
<html>
<head>
	<title>document 节点学习</title>
</head>
<body>
	<div id="target">
		<!-- <a href="" onmouseover="alert('derp')" "">Bob</a> -->
		<input type="button" value="Copy" onclick="doCopy()">
	</div>
	<script type="text/javascript">
		//1.这种方式新建节点,不能过滤单双引号,即存在XSS风险
		/*function escapeHtml(str) {
		  var div = document.createElement('div');
		  div.appendChild(document.createTextNode(str));
		  return div.innerHTML;
		};

		var userWebsite = '" onmouseover="alert(\'derp\')" "';
		var profileLink = '<a href="' + escapeHtml(userWebsite) + '">Bob</a>';
		var div = document.getElementById('target');
		div.innerHTML = profileLink;*/
		// <a href="" onmouseover="alert('derp')" "">Bob</a>

		//2.document.queryCommandEnabled
		// 先判断浏览器是否支持copy命令（允许可编辑区域的选中内容，复制到剪贴板），如果支持，就新建一个临时文本框，里面写入内容“你好”，并将其选中。然后，
		// 是否选中成功，如果成功，就将“你好”复制到剪贴板，再删除那个临时文本框。
		function doCopy(){
		  // 浏览器是否支持 copy 命令（选中内容复制到剪贴板）
		  if (document.queryCommandSupported('copy')) {
		    copyText('你好~~~');
		  }else{
		    console.log('浏览器不支持');
		  }
		}

		function copyText(text) {
		  var input = document.createElement('textarea');
		  // input.rows = 10;
		  // input.cols = 30;
		  document.body.appendChild(input);
		  input.value = text;
		  input.focus();
		  input.select();

		  // 当前是否有选中文字
		  if (document.queryCommandEnabled('copy')) {
		    var success = document.execCommand('copy');
		    // input.remove();//移除临时的输入框
		    console.log('Copy Ok');
		  } else {
		    console.log('queryCommandEnabled is false');
		  }
		}

	</script>
</body>
</html>